import React from 'react'
import styles from './index.module.css'
import img1 from '../../../assets/golive/pic_dd.png'
import Nav from '../../../components/nav'
import request from "../../../utils/request";

// import WaitPay from './waitPay'
// import WaitExpress from './waitExpress'
import WaitReceive from './waitReceive'


interface Props {

}

interface orderSku {
    id: number,
    skuNum: number,
    skuPrice: number,
    skuFullName: string,
    productName: string,
    productImage: string,
}

interface States {
    orderDetail: {
        id?: number,
        status?: number,
        orderNo?: string,
        statusTitle?: string,
        payAmount?: number,
        couponAmount?: number,
        freight?: number,
        dispatchAddress?: string,
        payWayTitle?: string,
        remark?: string,
        orderSkuList?: orderSku[]
    }
}

const Sku: React.FC<{ item: orderSku }> = ({item}) => {
    return (
        <div className={styles.goods}>
            <img src={item.productImage} alt="" style={{borderRadius: '8px'}}/>
            <div style={{
                padding: '2px 0 2px 10px',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-around',
                // marginLeft:'10px'
            }}>
                <b>{item.productName}</b>
                <span>{item.skuFullName}</span>
                <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center'
                }}>
                    <b style={{marginRight: '10px'}}>¥{item.skuPrice}</b>
                </div>
            </div>
        </div>
    );
};


class Index extends React.Component<Props, States> {
    state: States = {
        orderDetail: {}
    };

    componentDidMount(): void {
        request(`/orders/detail`).then((result) => {
            const {orderDetail} = result.data;
            this.setState({orderDetail});
        });
    }

    render() {
        const {orderDetail} = this.state;
        return (
            <div className={styles.container}>
                <Nav/>
                <div className={styles.content}>
                    <div>
                        <h2 style={{
                            margin: '8px 0 4px 10px',
                            textAlign: 'center'
                        }}>{orderDetail.statusTitle}</h2>
                        <div className={styles.tips}>好友暂未完善领取信息，分享当前页面提示好友前往完善<img src={img1} alt={""}/></div>
                    </div>

                    {
                        orderDetail.orderSkuList?.map((item) => {
                            return <Sku item={item} key={item.id}/>
                        })
                    }

                    <div className={styles.freight}>
                        <div>运费<b className={styles.money}>¥{orderDetail.freight}</b></div>
                        <div>优惠券<b className={styles.money}>¥{orderDetail.couponAmount}</b></div>
                        <div>实付款（含运费）<b className={styles.money}>¥{orderDetail.payAmount}</b></div>
                    </div>

                    <div className={styles.buyer}>
                        <div>购买人<b>圆咕隆咚大眼睛</b></div>
                        <div>购买人联系方式<b>136609898987</b></div>
                    </div>

                    <div className={styles.buyer}>
                        {/*<div>订单类型<b>转赠</b></div>*/}
                        <div>订单备注<b>{orderDetail.remark}</b></div>
                        <div>支付方式<b>{orderDetail.payWayTitle}</b></div>
                        <div>订单编号<b>{orderDetail.orderNo}</b></div>
                    </div>
                    <div className={styles.footer}>
                        {orderDetail.status === 1 && <WaitReceive/>}
                    </div>
                </div>

            </div>
        );
    }
}

export default Index
